<template>
	<div style="display: flex; flex-wrap: wrap;">
		<div id='pie' style="width:500px; height:300px;"></div>
		<div id='bar' style="width:500px; height:300px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.pie()
			this.bar()
		},
		methods: {
			bar() {
				const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'black', 'pink']
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('bar'));
				myChart.setOption({
					xAxis: {
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: 10,
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.5)'
						},
						itemStyle: {
							borderColor:'red',
							normal: {
								//这里是重点
								color: function(params) {
									//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
									return colors[params.dataIndex]
								}
							}
						},
						

					}]
				})
			},
			pie() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('pie'));
				// 绘制图表

				myChart.setOption({
					title: {
						text: '支付方式统计',
						subtext: 'Fake Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 1048,
								name: '微信'
							},
							{
								value: 735,
								name: '支付宝'
							},
							{
								value: 580,
								name: '银行卡'
							},
							{
								value: 484,
								name: '现金'
							},
							{
								value: 300,
								name: '欠款'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				});
			}
		}

	}
</script>

<style>
</style>
